<#import "/layout/page.ftl" as layout>
<#import "/layout/content.ftl" as content>

<@layout.page2col>

	<@content.content2col1>
	
		<@content.content2col1section
				title="Create Game" 
				subTitle="">
			
			<#include "script.ftl" />
			
			<form id="createForm" action="/lobby/create" method="post" novalidate="novalidate">
				<label for="gameName">Game Name</label>
				<#if gameNameInvalid??>
					<div class="input error">
				<#else>
					<div class="input">
				</#if>
					<input type="text" id="gameName" name="gameName" placeholder="e.g. ${session.username}'s Game" autocomplete="off" value="${gameName}" />
					<div class="inputicon">${gameNameInvalid!""}</div>
				</div>
				
				<label for="scenario">Scenario</label>
				<#if scenarioInvalid??>
					<div class="input error">
				<#else>
					<div class="input">
				</#if>
					<div class="select">
						<select id="scenario" name="scenario">
							<option value="ffttr">Flight From the Two Rivers (Easy)</option>
							<option value="sw">Shadow's Waiting (Medium)</option>
							<option value="tw">The Ways (Hard)</option>
							<option value="teotw">The Eye of the World (Medium)</option>
						</select>
					</div>
					<div class="inputicon">${scenarioInvalid!""}</div>
				</div>
				
				<img id="scenarioImage" src="/resources/scenarios/ffttr/banner.jpg" alt="Flight From the Two Rivers (Easy)" />
				
				<label for="mode">Mode</label>
				<#if modeInvalid??>
					<div class="input error">
				<#else>
					<div class="input">
				</#if>
					<select id="mode" name="mode">
						<option value="public">Public (Anyone can join)</option>
						<option value="private">Private (Invitation only)</option>
					</select>
					<div class="inputicon">${modeInvalid!""}</div>
				</div>
				
				<input type="submit" value="Create Game" />
				<a href="/lobby/join" style="font-size:1.5em;margin-left:10px;">Join an existing game?</a>
			</form>
		</@content.content2col1section>
		
	</@content.content2col1>
	
	<@content.content2col2>
		<@content.content2col2menu>
			<@content.content2col2menuitem url="/home" text="Home" isActive=false />
			<@content.content2col2menuitem url="/about" text="About" isActive=false />
			<@content.content2col2menuitem url="/profile" text="Profile" isActive=false />
			<@content.content2col2menuitem url="/deck" text="Deck" isActive=false />
			<@content.content2col2menuitem url="/lobby" text="Lobby" isActive=true />
			<@content.content2col2menuitem url="/blog" text="Blog" isActive=false />
		</@content.content2col2menu>
	</@content.content2col2>
	
</@layout.page2col>